<template>
	<view class="addcard">
		<view class="title">
			挂号就医实名制，信息错误无法就医
		</view>
		<view class="userinfo">
			<view class="useritem">
				<view class="useriteml">
					姓名
				</view>
				<view class="useritemr">
					<input v-model="name" type="text" placeholder="请输入姓名">
				</view>
			</view>
			<view class="useritem">
				<view class="useriteml">
					证件类型
				</view>
				<view class="useritemr" @click="choosecardtype()" style="display: flex;">
					{{cardtype}}
					<u-icon color="#cccccc" name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="useritem">
				<view class="useriteml">
					证件号码
				</view>
				<view class="useritemr">
					<input @blur="check()" v-model="card" type="text" placeholder="请输入证件号码">
				</view>
			</view>
			<view class="useritem">
				<view class="useriteml">
					年龄
				</view>
				<view class="useritemr">
					<input v-model="age" type="text" placeholder="请输入年龄">
				</view>
			</view>
			<view class="useritem">
				<view class="useriteml">
					性别
				</view>
				<view class="useritemr" style="display: flex;" v-if="sex" @click="choosesex()">
					{{sex}}
					<u-icon color="#cccccc" name="arrow-right"></u-icon>
				</view>
				<view class="useritemr" style="display: flex;color: #ccc;" v-if="!sex" @click="choosesex()">
					请选择性别<u-icon color="#cccccc" name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		<view class="userinfo">
			<view class="useritem">
				<view class="useriteml">
					手机号码
				</view>
				<view class="useritemr">
					<input v-model="phone" type="text" placeholder="请输入手机号码">
				</view>
			</view>

			<view class="useritem">
				<view class="useriteml">
					详细地址
				</view>
				<view class="useritemr">
					<input v-model="address" type="text" placeholder="请输入详细地址">
				</view>
			</view>

		</view>
		<view class="btn" @click="adduser()">
			确定
		</view>
		<u-popup :show="showcardtype" mode="bottom" @close="closepop()">
			<view class="btnlist">
				<view class="btnl" @click="closepoptype()">
					取消
				</view>
				<view class="btnr" @click="confirmpoptype()">
					确定
				</view>
			</view>
			<picker-view :value="value" @change="onChange" class="my-picker">
				<picker-view-column>
					<view v-for="item in cardtypelist">{{item}}</view>
				</picker-view-column>
			</picker-view>

		</u-popup>
		<u-popup :show="showsex" mode="bottom" @close="closepopp()">
			<view class="btnlist">
				<view class="btnl" @click="closepopsex()">
					取消
				</view>
				<view class="btnr" @click="confirmpopsex()">
					确定
				</view>
			</view>
			<picker-view :value="valuee" @change="onChangee" class="my-picker">
				<picker-view-column>
					<view v-for="item in sexlist">{{item}}</view>
				</picker-view-column>
			</picker-view>

		</u-popup>
	</view>
</template>

<script>
	import homeApi from '@/api/home'
	export default {
		data() {
			return {
				value: '0',
				valuee: '0',
				showsex: false,
				showcardtype: false,
				cardtype: "身份证",
				sex: "",
				cardtypelist: [
					"身份证", "出生证", "港澳居民来往内地通行证"
				],
				sexlist: [
					"男", "女"
				],
				phone: "",
				name: "",
				card: "",
				address: "",
				age: ""
			}
		},
		onShow() {

		},
		onLoad(option) {},
		methods: {
			adduser() {
				// console.log(this.gender);
				// 判断手机号是否正确
				let regPhone = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
				// 邮箱正则
				var emailReg = /^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/;
				// 通行证正则
				var idCard = /^[H|M]\d[0-9]{7}$/;
				// 身份证正则
				var levalard =
				/^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
				// 出生证正则
				var birthdayCard = /^[A-Z]{1}\d[0-9]{8}$/;
				var num = /^[0-9]*$/;

				var msg = "";
				if (this.name == "") {
					msg = "请输入姓名";
					uni.showToast({
						title: msg,
						icon: "none"
					})
				}


				if (this.card == "") {
					msg = "请输入证件号";
					uni.showToast({
						title: msg,
						icon: "none"
					})
				}
				if (this.name == "") {
					msg = "请输入姓名";
				uni.showToast({
					title: msg,
					icon: "none"
				})
				}
				if (this.cardtype == "身份证") {
				

					var idCard = this.card;
					idCard = idCard.toUpperCase(); // 转大写
					let len = idCard.length;
					let city = {
						11: "北京",
						12: "天津",
						13: "河北",
						14: "山西",
						15: "内蒙古",
						21: "辽宁",
						22: "吉林",
						23: "黑龙江 ",
						31: "上海",
						32: "江苏",
						33: "浙江",
				 	34: "安徽",
						35: "福建",
						36: "江西",
						37: "山东",
						41: "河南",
						42: "湖北 ",
						43: "湖南",
				  44: "广东",
						45: "广西",
						46: "海南",
						50: "重庆",
						51: "四川",
						52: "贵州",
						53: "云南",
						54: "西藏 ",
						61: "陕西",
						62: "甘肃",
						63: "青海",
						64: "宁夏",
						65: "新疆",
						71: "台湾",
						81: "香港",
						82: "澳门",
						91: "国外"
					};
					//1. 判断长度
					if (len !== 15 && len !== 18) {
						msg = "请输入正确的证件号";
						uni.showToast({
							title: "请输入正确的证件号",
							icon: "none"
						})
					}
					//2. 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X。
					if (!/(^\d{15})|(^̲\d{17}([0-9]|X))/.test(idCard)) {
						msg = "请输入正确的证件号";
						uni.showToast({
							title: "请输入正确的证件号",
							icon: "none"
						})
					}
					//3. 地址码
					if (!city[idCard.substr(0, 2)]) {
						msg = "请输入正确的证件号";
						uni.showToast({
							title: "请输入正确的证件号",
							icon: "none"
						})
					}

					let re;
					//4. 生日
					if (len === 15) {
						re = new RegExp(/^(\d{6})(\d{2})(\d{2})(\d{2})(\d{3})$/);
						let arrSplit = idCard.match(re);

						//检查生日日期是否正确
						let birth = new Date(
							"19" + arrSplit[2] + "/" + arrSplit[3] + "/" + arrSplit[4]
						);
						let isBirth =
							birth.getYear() === Number(arrSplit[2]) &&
							birth.getMonth() + 1 === Number(arrSplit[3]) &&
							birth.getDate() === Number(arrSplit[4]);
						if (!isBirth) {
							msg = "请输入正确的证件号";
							uni.showToast({
								title: "请输入正确的证件号",
								icon: "none"
							})
						}
					} else if (len === 18) {
						re = new RegExp(/^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/);
				 	let arrSplit = idCard.match(re);

						//检查生日日期是否正确
						let birth = new Date(
							arrSplit[2] + "/" + arrSplit[3] + "/" + arrSplit[4]
						);
						let isBirth =
							birth.getFullYear() === Number(arrSplit[2]) &&
							birth.getMonth() + 1 === Number(arrSplit[3]) &&
							birth.getDate() === Number(arrSplit[4]) &&
							birth.getTime() < new Date().getTime();
						if (!isBirth) {
							msg = "请输入正确的证件号";
				 uni.showToast({
				 	title: "请输入正确的证件号",
				 	icon: "none"
				 })
						} else {
							//检验18位身份证的校验码是否正确。
							//校验位按照ISO 7064:1983.MOD 11-2的规定生成，X可以认为是数字10。
							let valnum;
							let arrInt = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
							let arrCh = ["1", "0", "X", "9", "8", "7", "6", "5", "4", "3", "2"];
							let nTemp = 0,
								i;
							for (i = 0; i < 17; i++) {
								nTemp += idCard.substr(i, 1) * arrInt[i];
							}
							valnum = arrCh[nTemp % 11];
							if (valnum !== idCard.substr(17, 1)) {
								msg = "请输入正确的证件号";
								uni.showToast({
									title: "请输入正确的证件号",
									icon: "none"
								})
							}
						}
					}
				}
				if (this.cardtype == "出生证") {
					if (!birthdayCard.test(this.card)) {
						msg = "请输入正确的证件号";
						uni.showToast({
							title: "请输入正确的证件号",
							icon: "none"
						})
					}
				}
				if (this.cardtype == "港澳居民来往内地通行证") {
					if (!idCard.test(this.card)) {
						msg = "请输入正确的证件号";
						uni.showToast({
							title: "请输入正确的证件号",
							icon: "none"
						})
					}
				}
				if(!this.sex){
					msg="请选择性别"
					uni.showToast({
						title: "请选择性别",
						icon: "none"
					})
				}
				if (!num.test(this.age)) {
					msg = "年龄请输入数字";
					uni.showToast({
						title: "年龄请输入数字",
						icon: "none"
					})
				}
				if (this.phone == "") {
					msg = "请输入手机号";
					uni.showToast({
						title: "请输入手机号",
						icon: "none"
					})
				}
				if (!regPhone.test(this.phone)) {
					msg = "请输入正确的手机号";
				uni.showToast({
					title: "请输入正确的手机号",
					icon: "none"
				})
				}
				if (msg == "") {
				uni.showToast({
					title: "成功",
					icon: "none"
				})
				}
			},
			check() {
				if (this.cardtype == "身份证") {
					var idCard = this.card
					let _this = this;
					let bbd = ''; // 出生日期
					let sex = ''; // 性别
					let canPass = true;
					idCard = idCard.toUpperCase(); // 转大写
					let len = idCard.length;
					let city = {
						11: "北京",
						12: "天津",
						13: "河北",
						14: "山西",
						15: "内蒙古",
						21: "辽宁",
						22: "吉林",
						23: "黑龙江 ",
						31: "上海",
						32: "江苏",
						33: "浙江",
						34: "安徽",
						35: "福建",
						36: "江西",
						37: "山东",
						41: "河南",
						42: "湖北 ",
						43: "湖南",
						44: "广东",
						45: "广西",
						46: "海南",
						50: "重庆",
						51: "四川",
						52: "贵州",
						53: "云南",
						54: "西藏 ",
						61: "陕西",
						62: "甘肃",
						63: "青海",
						64: "宁夏",
						65: "新疆",
						71: "台湾",
						81: "香港",
						82: "澳门",
						91: "国外"
					};
					//1. 判断长度
					if (len !== 15 && len !== 18) {
						// _this.$toast.error('身份证号长度不正确！');
						uni.showToast({
							title: "请输入正确的身份证号！",
							icon: "none"
						})
						canPass = false;
					}
					//2. 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X。
					if (!(/(^\d{15})|(^̲\d{17}([0-9]|X))/.test(idCard))) {

						uni.showToast({
							title: "请输入正确的身份证号",
							icon: "none"
						})
						canPass = false;
					}
					//3. 地址码
					if (!city[idCard.substr(0, 2)]) {

						uni.showToast({
							title: "请输入正确的身份证号",
							icon: "none"
						})
						canPass = false;
					}

					let re;
					//4. 生日
					if (len === 15) {
						re = new RegExp(/^(\d{6})(\d{2})(\d{2})(\d{2})(\d{3})$/);
						let arrSplit = idCard.match(re);

						//检查生日日期是否正确
						let birth = new Date('19' + arrSplit[2] + '/' + arrSplit[3] + '/' + arrSplit[4]);
						let isBirth = (birth.getYear() === Number(arrSplit[2])) && ((birth.getMonth() + 1) === Number(
							arrSplit[
								3])) && (
							birth.getDate() === Number(arrSplit[4]));
						if (!isBirth) {
							uni.showToast({
								title: "请输入正确的身份证号",
								icon: "none"
							})

							canPass = false;
						}
						bbd = birth;
					} else if (len === 18) {
						re = new RegExp(/^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/);
						let arrSplit = idCard.match(re);

						//检查生日日期是否正确
						let birth = new Date(arrSplit[2] + "/" + arrSplit[3] + "/" + arrSplit[4]);
						let isBirth = (birth.getFullYear() === Number(arrSplit[2])) && ((birth.getMonth() + 1) === Number(
								arrSplit[3])) &&
							(birth.getDate() === Number(arrSplit[4]) && (birth.getTime() < new Date().getTime()));
						if (!isBirth) {


							canPass = false;
						} else {
							//检验18位身份证的校验码是否正确。
							//校验位按照ISO 7064:1983.MOD 11-2的规定生成，X可以认为是数字10。
							let valnum;
							let arrInt = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
							let arrCh = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'];
							let nTemp = 0,
								i;
							for (i = 0; i < 17; i++) {
								nTemp += idCard.substr(i, 1) * arrInt[i];
							}
							valnum = arrCh[nTemp % 11];
							if (valnum !== idCard.substr(17, 1)) {
								// uni.showToast({
								// 	title: "身份证号校验码不正确！",
								// 	icon: "none"
								// })

								canPass = false;
							}
						}
						bbd = birth;
					}
					// 如果身份验证通过，计算出生年月，性别
					if (canPass == true) {
						bbd = bbd.getFullYear() + '-' + Number(bbd.getMonth() + 1) + '-' + bbd.getDate();
						let arr_fix = bbd.split('-');
						if (arr_fix[1].length == 1) {
							arr_fix[1] = '0' + arr_fix[1];
						}
						if (arr_fix[2].length == 1) {
							arr_fix[2] = '0' + arr_fix[2];
						}
						bbd = arr_fix[0] + '-' + arr_fix[1] + '-' + arr_fix[2];
						this.age = this.getAge(bbd)
						console.log(this.age, "111")
						// bbd = arr_fix[0] + '-' + arr_fix[1];
						if (idCard.length == 18) {
							sex = idCard.charAt(idCard.length - 2)
						} else {
							sex = idCard.charAt(idCard.length - 1)
						}
						if (sex % 2 == 1) {
							sex = '男';
							this.sexvalue = 1
							this.sex = "男"
						} else {
							sex = '女';
							this.sexvalue = 2
							this.sex = "女"
						}

					}


				}

			},
			getAge(strBirthday) {
				var returnAge;
				var strBirthdayArr = strBirthday.split("-");
				var birthYear = strBirthdayArr[0];
				var birthMonth = strBirthdayArr[1];
				var birthDay = strBirthdayArr[2];

				let d = new Date();
				var nowYear = d.getFullYear();
				var nowMonth = d.getMonth() + 1;
				var nowDay = d.getDate();

				if (nowYear == birthYear) {
					returnAge = 0; //同年 则为0岁
				} else {
					var ageDiff = nowYear - birthYear; //年之差
			  if (ageDiff > 0) {
						if (nowMonth == birthMonth) {
							var dayDiff = nowDay - birthDay; //日之差
							if (dayDiff < 0) {
								returnAge = ageDiff - 1;
							} else {
								returnAge = ageDiff;
							}
						} else {
							var monthDiff = nowMonth - birthMonth; //月之差
							if (monthDiff < 0) {
								returnAge = ageDiff - 1;
							} else {
								returnAge = ageDiff;
							}
						}
					} else {
						returnAge = -1; //出生日期不能大于今天
					}
				}
				return returnAge;
			},
			choosesex() {
				this.showsex = true
				if(this.sex=='男'){
					this.valuee="0"
				}
				if(this.sex=='女'){
					this.valuee="1"
				}
			},
			choosecardtype() {
				this.showcardtype = true
				if(this.cardtype=='身份证'){
					this.value="0"
				}
			if(this.cardtype=='出生证'){
				this.value="1"
			}
			if(this.cardtype=='港澳居民来往内地通行证'){
				this.value="2"
			}
			},
			closepoptype() {
				this.showcardtype = false
			},
			confirmpoptype() {
				this.showcardtype = false
			},
			closepopsex() {
				this.showsex = false
			},
			confirmpopsex() {
				this.showsex = false
				if (this.sex == "") {
					this.sex = "男"
					this.valuee="0"
				}
				
			},
			onChange(e) {
				let index = e.detail.value[0]
				this.value = index
				let cardt = this.cardtypelist.find((el) => this.cardtypelist.indexOf(el) == index)
				this.cardtype = cardt
			},
			onChangee(e) {
				let index = e.detail.value[0]
				this.valuee = index
				let cardt = this.sexlist.find((el) => this.sexlist.indexOf(el) == index)
				this.sex = cardt
			},
			closepop() {
				this.showcardtype = false
			},
			closepopp() {
				this.showsex = false
			}

		}
	}
</script>

<style lang="scss" scoped>
	.addcard {
		background-color: #F5F6F8;
		padding-bottom: 100rpx;
		overflow: hidden;

		.btnlist {
			width: 95%;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			line-height: 100rpx;
			font-size: 30rpx;

			.btnl {
				color: #888;
			}

			.btnr {
				color: #4581f7;
			}
		}

		.btn {
			width: 93%;
			margin: 0 auto;
			margin-top: 80rpx;
			border-radius: 15rpx;
			line-height: 80rpx;
			border-radius: 40rpx;
			background-color: #4581f7;
			color: #fff;
			text-align: center;

		}

		.title {
			width: 93%;
			margin: 0 auto;
			margin-top: 20rpx;
			font-size: 28rpx;
			line-height: 40rpx;
		}

		.userinfo {
			width: 93%;
			margin: 0 auto;
			margin-top: 20rpx;
			border-radius: 15rpx;
			background-color: #fff;

			.useritem {
				height: 100rpx;
				border-bottom: 1rpx solid #f7f7f7;
				display: flex;
				justify-content: space-between;
				font-size: 28rpx;
				line-height: 100rpx;
				width: 95%;
				margin: 0 auto;

				.useriteml {
					width: 150rpx;
					color: #888;
				}

				.useritemr {
					input {
						border: none;
						font-size: 28rpx;
						text-align: right;
						// border: 1rpx solid #000;
						margin-top: 25rpx;
					}
				}
			}
		}


	}
</style>
